<template>
  <view class="goldplan-container">
    <view class="receipt-card">
      <view class="receipt-header">
        <image class="merchant-logo" src="/static/logo.png" mode="aspectFit"></image>
        <text class="merchant-name">智能门禁运营平台</text>
        <view class="status-icon success">
          <text class="iconfont icon-check"></text>
        </view>
        <text class="status-text">支付成功</text>
        <text class="amount">￥{{amount}}</text>
      </view>
      
      <view class="receipt-divider"></view>
      
      <view class="receipt-body">
        <view class="info-row">
          <text class="info-label">订单内容</text>
          <text class="info-value">{{orderInfo}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">订单编号</text>
          <text class="info-value">{{orderNo}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">支付时间</text>
          <text class="info-value">{{payTime}}</text>
        </view>
        <view class="info-row">
          <text class="info-label">支付方式</text>
          <text class="info-value">微信支付</text>
        </view>
      </view>
      
      <view class="receipt-footer">
        <button class="back-btn" @click="goBack">返回首页</button>
        <button class="detail-btn" @click="goToOrderDetail">查看订单</button>
      </view>
    </view>
    
    <view class="merchant-info">
      <text>广州云控电子技术有限公司</text>
      <view class="contact-btns">
        <button class="contact-btn" @click="callInstallation">充电桩报装电话</button>
        <button class="contact-btn" @click="callCustomerService">客服电话</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: '0.00',
      orderInfo: '门禁升级缴费',
      orderNo: '',
      orderId: '',
      payTime: '',
      mchData: null,
      installationPhone: '13751138618',
      customerServicePhone: '4006983338'
    }
  },
  onLoad(options) {
    // 解析URL参数
    if (options.orderNo) {
      this.orderNo = options.orderNo;
    }
    if (options.amount) {
      this.amount = options.amount;
    }
    if (options.orderInfo) {
      this.orderInfo = decodeURIComponent(options.orderInfo);
    }
    if (options.orderId) {
      this.orderId = options.orderId;
    }
    
    // 设置支付时间为当前时间
    const now = new Date();
    this.payTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
  },
  onReady() {
    // 点金计划商家小票准备就绪通知
    this.initGoldPlan();
  },
  methods: {
    initGoldPlan() {
      // 检查是否在微信环境中
      if (typeof parent !== 'undefined' && typeof parent.postMessage === 'function') {
        // 通知微信点金计划页面已准备就绪
        const mchData = {
          action: 'onIframeReady',
          displayStyle: 'SHOW_CUSTOM_PAGE',
          height: 600 // 设置页面高度
        };
        const postData = JSON.stringify(mchData);
        parent.postMessage(postData, '*');
        
        // 监听来自微信的消息
        window.addEventListener('message', (event) => {
          try {
            const data = JSON.parse(event.data);
            if (data && data.action === 'onReceivedData') {
              this.mchData = data;
              // 可以根据接收到的数据更新页面
              if (data.paymentInfo) {
                this.amount = data.paymentInfo.amount || this.amount;
                this.orderNo = data.paymentInfo.outTradeNo || this.orderNo;
                // 其他数据处理...
              }
            }
          } catch (e) {
            console.error('解析点金计划消息失败', e);
          }
        });
      }
    },
    goBack() {
      // 返回首页
      uni.switchTab({
        url: '/pages/homeWorkbench/index'
      });
    },
    goToOrderDetail() {
      // 跳转到订单详情页，如果有的话
      if (this.orderId) {
        uni.navigateTo({
          url: `/pages/mine/payment/index?orderId=${this.orderId}`
        });
      } else {
        uni.switchTab({
          url: '/pages/homeWorkbench/index'
        });
      }
    },
    callInstallation() {
      // 拨打充电桩报装电话
      uni.showModal({
        title: '充电桩报装',
        content: `确定要拨打充电桩报装电话 ${this.installationPhone} 吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: this.installationPhone,
              fail: (err) => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    },
    callCustomerService() {
      // 拨打客服电话
      uni.showModal({
        title: '客服电话',
        content: `确定要拨打客服电话 ${this.customerServicePhone} 吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: this.customerServicePhone,
              fail: (err) => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.goldplan-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.receipt-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 32rpx;
  overflow: hidden;
}

.receipt-header {
  padding: 48rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #f8f8f8 0%, #ffffff 100%);
}

.merchant-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-bottom: 16rpx;
}

.merchant-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 32rpx;
}

.status-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  
  &.success {
    background-color: #07c160;
    color: #fff;
    font-size: 48rpx;
  }
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #07c160;
  margin-bottom: 24rpx;
}

.amount {
  font-size: 64rpx;
  font-weight: bold;
  color: #333;
}

.receipt-divider {
  height: 2rpx;
  background-color: #f0f0f0;
  margin: 0 32rpx;
  position: relative;
  
  &:before, &:after {
    content: '';
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    background-color: #f7f8fa;
    border-radius: 16rpx;
    top: -16rpx;
  }
  
  &:before {
    left: -16rpx;
  }
  
  &:after {
    right: -16rpx;
  }
}

.receipt-body {
  padding: 32rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 28rpx;
  color: #999;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.receipt-footer {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
}

.back-btn, .detail-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin: 0 16rpx;
}

.back-btn {
  background-color: #07c160;
  color: #fff;
}

.detail-btn {
  background-color: #f0f0f0;
  color: #333;
}

.merchant-info {
  margin-top: 32rpx;
  text-align: center;
  
  text {
    display: block;
    font-size: 24rpx;
    color: #999;
    line-height: 1.6;
  }
  
  .contact-btns {
    display: flex;
    justify-content: center;
    margin-top: 20rpx;
    padding: 0 20rpx;
  }
  
  .contact-btn {
    flex: 1;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 24rpx;
    color: #07c160;
    background-color: #f0f0f0;
    margin: 0 10rpx;
    border-radius: 35rpx;
    border: none;
    max-width: 300rpx;
  }
}
</style> 